<template>
	<view class="promotion-container">
		<scroll-view scroll-y style="height: calc(100vh - 140rpx);">
			<view class="rules-box">
				<view class="top-title">
					<view class="mb10">累计推广人数： {{userInfo.useDownloadNum}}</view><br />
					<view class="mb10">邀请1位下载，即可获得2天VIP，无限领取</view>
				</view>
				<view class="qrcode">
					<view class="code">
						<image :src="url" class="img"></image>
					</view>
					<view class="share-url">
						您的推广链接:
					</view>
					<view class="share-url">
						{{baseUrl + userInfo.id}}
					</view>
					<view class="btn">
						<button @click="savePic">保存图片</button>
						<button type="primary" @click="copyUrl">复制链接</button>
					</view>
				</view>
			</view>
			<view class="rules-box">
				<view class="icon">
					<uni-icons type="flag" size="40"></uni-icons>
					<text class="rules-title font30">推广规则：</text>
				</view>
				<text
					class="rules-txt mb10 font28">分享推广链接或复制推广码，分享给好友。好友通过您的分享下载安装APP后，自动绑定推进关系，您即可获取相应等级的权益。另外每日您还可以使用一键分享功能，分享给您的好友，即可额外获取一次缓存次数。</text>
				<text class="rules-txt font28">备注: 推广等级总共分为6级，达到制定推广数量自动升级即可享有该等级的相应权益。推广获取的权益可以购买VIP赠送权益看加使用。每日一键分享缓存次数最多额外累计2次。</text>
			</view>
			<view class="rules-box">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="20" align="center">等级</uni-th>
						<uni-th width="40" align="center">推广人数</uni-th>
						<uni-th width="30" align="center">天数</uni-th>
						<uni-th width="40" align="center">缓存次数</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in recommendList" :key="index">
						<uni-td align="center">{{ item.grade }}</uni-td>
						<uni-td align="center">{{ item.num }}</uni-td>
						<uni-td align="center">{{ item.time }}</uni-td>
						<uni-td align="center">{{ item.cacheTimes }}</uni-td>

					</uni-tr>
				</uni-table>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {
		recommendAPI,
		gradeAPI
	} from '@/api/user.js'
	import { baseUrl } from '@/utils/setting'
	import QRCode from 'qrcode'
	export default {
		data() {
			return {
				recommendList: [],
				loading: false,
				userInfo: {},
				url: '',
				baseUrl: baseUrl+'app/',
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/user/promotion/myPromotion'
			});
		},
		onShow() {
			// 获取设备ID 用户信息
			// this.$store.dispatch('getDeviceId')
			// this.userInfo = this.$store.state.user.user
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.getTableData()
			this.generateQRCode()
		},
		methods: {
			savePic() {
				this.downloadImage()
			},
			// 生产二维码
			generateQRCode() {
				QRCode.toDataURL(this.baseUrl + this.userInfo.id).then(res => {
					this.url = res
				})
			},
			copyUrl() {
				uni.setClipboardData({
					data: this.url,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			getTableData() {
				this.loading = true
				gradeAPI().then(res => {
					this.recommendList = res.data
					this.loading = false
				}).finally(() => {
					this.loading = false
				})
			},
			getQrCode() {
				recommendAPI().then(res => {
					console.log(res);
				})
			},
			// 下载图片
			downloadImage() {
				const imageUrl =
					'https://img0.baidu.com/it/u=1552106092,2626691830&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1740157200&t=439742f1ef275ce46f98cd38248abe2a'; // 替换为你的图片URL

				uni.downloadFile({
					url: imageUrl,
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.showToast({
										title: '下载成功',
										icon: 'success'
									});
								},
								fail: (err) => {
									console.error('保存图片失败', err);
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						} else {
							console.error('下载图片失败', downloadResult);
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('下载失败', err);
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},
			saveImageToAlbum(filePath) {
				uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: () => {
						console.log('保存成功');
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('保存失败', err);
						if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
							uni.showModal({
								title: '提示',
								content: '需要您授权保存图片到相册',
								success: (modalResult) => {
									if (modalResult.confirm) {
										uni.openSetting({
											success: (settingResult) => {
												console.log('设置结果', settingResult);
											}
										});
									}
								}
							});
						} else {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.promotion-container {
		padding: 20rpx;

		.mb10 {
			margin-bottom: 10rpx;
			display: inline-block;
		}

		.top-title {
			text-align: center;


		}

		.qrcode {

			.code {
				width: 350rpx;
				height: 350rpx;

				text-align: center;
				margin: auto;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.share-url {
				text-align: center;
				white-space: normal;
			}

			.btn {
				width: 70%;
				margin: auto;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
			}
		}

		.rules-box {
			background-color: #fff;
			padding:10rpx 15rpx 20rpx;
			border-radius: 10px;
			// text-align: center;
			margin-bottom: 20px;
			color: var(--txt-color-black);
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

			.rules-title {
				font-weight: bold;
				display: inline-block;
				text-indent: 2em;
			}

			.icon {
				position: relative;

				.uni-icons {
					position: absolute;
					left: -5px;
				}
			}



			.rules-txt {
				text-indent: 2em !important;
			}
		}
	}
</style>